<template>
  <div class="app-container">
    <div class="cardBox">
      <el-form
        ref="form"
        :model="searchForm"
        label-width="80px"
        :inline="true"
        class="search-form"
      >
        <el-row :gutter="20">
          <el-col :span="20" :offset="0">
            <el-form-item label="用户ID">
              <el-input
                v-model="searchForm.user_id"
                placeholder="请输入用户ID"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4" style="text-align: right">
            <el-form-item>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="doSearchList"
                >查询</el-button
              >
              <el-button
                size="small"
                type="primary"
                icon="el-icon-refresh"
                @click="doCancelSearch"
                >重置</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="cardBox marginTop">
      <el-row :gutter="20">
        <el-col>
          <el-table
            v-loading="isLoading"
            :data="rechargeList"
            :header-cell-style="{
              'background-color': '#f3f8fe',
              color: '#606266',
              height: '50px',
            }"
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column
              prop="created_at"
              align="center"
              label="创建时间"
            />
            <el-table-column fixed="left" prop="id" align="center" label="ID" />
            <el-table-column
              prop="user.nickname"
              align="center"
              label="用户名称"
            />
            <el-table-column prop="user_id" align="center" label="用户ID" />
            <el-table-column prop="order_no" align="center" label="订单编号" />
            <!-- <el-table-column align="center" label="类型">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.type == 1" type="success" size="mini"
                  >增加</el-tag
                >
                <el-tag
                  v-else-if="scope.row.type == 2"
                  type="danger"
                  size="mini"
                  >减少</el-tag
                >
              </template>
            </el-table-column> -->
            <el-table-column prop="amount" align="center" label="金额" />
            <el-table-column align="center" label="proof">
              <template slot-scope="scope">
                <div style="width: 40px; height: 40px; margin: 0 auto">
                  <el-image
                    v-if="scope.row.proof"
                    :src="scope.row.proof"
                    :preview-src-list="[scope.row.proof]"
                  />
                </div>
              </template>
            </el-table-column>

            <el-table-column prop="type_name" align="center" label="类型名称" />
            <el-table-column prop="remark" align="center" label="备注" />
            <el-table-column
              fixed="right"
              align="center"
              label="操作"
              width="150"
            >
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.audit_status == 0"
                  type="success"
                  size="mini"
                  @click="goAuditRecharge(scope.row.id, '1')"
                  >同意</el-button
                >
                <el-button
                  v-if="scope.row.audit_status == 0"
                  type="danger"
                  size="mini"
                  @click="goAuditRecharge(scope.row.id, '2')"
                  >驳回</el-button
                >
                <el-tag
                  v-else-if="scope.row.audit_status == 1"
                  type="success"
                  size="mini"
                  >已通过</el-tag
                >
                <el-tag
                  v-else-if="scope.row.audit_status == 2"
                  type="danger"
                  size="mini"
                  >已驳回</el-tag
                >
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row class="marginTop" style="text-align: right">
        <el-pagination
          style="margin-top: 5px"
          :current-page.sync="paginationObj.start"
          :page-sizes="paginationObj.pageSizes"
          :page-size="paginationObj.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paginationObj.total"
          background
          @size-change="sizeChange"
          @current-change="currentChange"
        />
      </el-row>
    </div>

    <!-- 审核充值 -->
    <el-dialog title="充值审核" :visible.sync="isShowDialog" width="40%">
      <el-form
        ref="auditFormRef"
        :model="auditForm"
        :rules="auditFormRules"
        label-width="80px"
        size="mini"
      >
        <el-row :gutter="20">
          <el-col :span="24" :offset="0">
            <el-form-item label="审核备注" prop="remark">
              <el-input
                v-model="auditForm.remark"
                type="textarea"
                :rows="2"
                placeholder="审核备注"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <span slot="footer">
        <el-button @click="doCancelAdudit">取消</el-button>
        <el-button type="primary" @click="doAuditRecharge">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { list, audit } from "@/api/finance/index";
import mix from "@/mixins/index";
export default {
  name: "UserRecharge",
  components: {},
  mixins: [mix],
  data() {
    return {
      isShowDialog: false,
      isLoading: false,
      searchForm: {},
      rechargeList: [],
      auditForm: {},
      auditFormRules: {
        audit_status: [
          { required: true, message: "审核状态必填", trigger: "blur" },
        ],
        remark: [
          {
            required: false,
            validator: (rule, value, callback) => {
              if (this.auditForm.audit_status == "2") {
                if (value == "" || !value) {
                  callback(new Error("请输入驳回原因"));
                } else {
                  callback();
                }
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
      rechargeID: "", // 充值ID
      checkboxUserInfoOption: [],
      userInfoThead: ["nickname", "mobile", "avatar", "status"],
      userInfoOption: {
        nickname: {
          label: "昵称",
          value: "nickname",
        },
        mobile: {
          label: "手机号",
          value: "mobile",
        },
        avatar: {
          label: "头像",
          value: "avatar",
        },
        status: {
          label: "用户状态",
          value: "status",
        },
      },
    };
  },
  created() {
    this.getRechargeList();
  },
  methods: {
    doSearchList() {
      this.getRechargeList();
    },
    doCancelSearch() {
      this.searchForm = this.$options.data().searchForm;
      this.getRechargeList();
    },

    async getRechargeList() {
      this.isLoading = true;
      this.searchForm.page = this.paginationObj.start;
      this.searchForm.count = this.paginationObj.limit;
      const res = await list(this.searchForm);
      const { code, data, msg } = res;
      if (code === 200) {
        this.rechargeList = data.list;
        this.paginationObj.total = data.total;
      } else {
        this.$message.error(msg);
      }
      this.isLoading = false;
    },
    sizeChange(val) {
      this.paginationObj.start = 1;
      this.paginationObj.limit = val;
      this.getRechargeList();
    },
    currentChange(val) {
      this.paginationObj.start = val;
      this.getRechargeList();
    },
    // 去审核充值
    goAuditRecharge(id, sta) {
      this.auditForm.audit_status = sta;
      this.rechargeID = id;
      this.isShowDialog = true;
    },
    // 确定审核
    doAuditRecharge() {
      this.$refs.auditFormRef.validate(async (valid) => {
        if (valid) {
          this.auditForm.id = this.rechargeID;
          const res = await audit(this.auditForm);
          const { code, msg } = res;
          if (code === 200) {
            // 更新数据
            this.isShowDialog = false;
            this.$message.success("操作成功！！！");
            this.auditForm.remark = "";
            this.getRechargeList();
          } else {
            this.$message.error(msg);
          }
        } else {
          this.$message.warning("请检查：有部分信息尚未添加完整！");
        }
      });
    },
    // 取消审核
    doCancelAdudit() {
      this.rechargeID = "";
      this.isShowDialog = false;
      this.auditForm = this.$options.data().auditForm;
    },
    refresh() {
      this.getRechargeList();
    },
  },
};
</script>
<style lang='scss' scoped>
.splitTitle {
  font-size: 16px;
  font-weight: 700;
  color: #606266;

  .split {
    width: 95%;
    border-bottom: 2px solid #c9c9c980;
    padding-bottom: 10px;
    margin: 20px auto;
  }
}
</style>
<style>
.el-upload--picture-card {
  width: 90px !important;
  height: 90px !important;
  line-height: 90px;
}

.el-upload-list--picture-card .el-upload-list__item-actions {
  width: 90px !important;
  height: 90px !important;
}

.el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 90px !important;
  height: 90px !important;
}

.el-upload-list--picture-card .el-upload-list__item {
  width: 90px !important;
  height: 90px !important;
}

.tox .tox-dialog-wrap__backdrop {
  z-index: 9993 !important;
}

.tox-tinymce-aux {
  z-index: 9990 !important;
}

.tox .tox-dialog {
  z-index: 9995 !important;
}
</style>

